<style type="text/css">
body .ui-widget-content{
	border:0px;
}
</style>
<div class="container text-center">
    <p-tabView (onChange)="handleChange($event)">
        <p-tabPanel header="{{'Grid View'|translate}}" leftIcon="pi pi-calendar">
            <div class="ui-g" style="width: 40%;margin-left: 19%;margin-top: -48px;">

                <div class="ui-g-12 " style="display: block;">
                    <div class="ui-inputgroup" >
                        <span class="ui-inputgroup-addon">
                            <i class="fa fa-search fa-2x"></i>
                        </span>
                        <input type="text" pInputText placeholder="{{'Search'|translate}}..." [(ngModel)]="searchText" style="width:100%">
                    </div>

                </div>
            </div>
            <div class="ui-g ui-fluid">
                <div class=" ui-g-3 ui-sm-12" *ngFor="let item of propertyLists| findListingFilter : searchText">
                    <div class="card" style="padding: 0;border-radius: 20px;padding-bottom: 5%;">
                        <a href="/agent/shared/project-detail/{{item.id}}?mode=view" class="img-mark-container">
                            <!-- <img class="card-img-top" style="height: 180px;" [src]="getLogo(item)" alt="Card image cap"> -->
                            <div [ngStyle]="{'background':getLogo(item),'background-size':'cover', 'background-repeat': 'no-repeat', 'width':'100%', 'height':'0', 'padding-bottom':'92%', 'border-radius': '20px'}">
                            </div>
                            <div class="img-featured-mark" *ngIf="item.isFeatured">Featured</div>
                            <!-- <div style="background:url(https://lwphoenix.blob.core.windows.net/files/images/upload/0003895_thumb.jpeg) center; background-size:100% 100%; width:100%; height:0; padding-bottom:59.25%;"> -->
                            <!-- </div> -->
                            <!-- important do not remove -->
                            <!-- <div class="img-mark" *ngIf="item.featureId>0">Featured</div> -->
                        </a>

                        <div class="card-block" style="height: 130px;margin-top: 15px;color: rgba(106,106,107,1);text-align: left;padding-left: 12px;line-height: 28px;">
                            <span class="badge badge-primary" *ngIf="item.iFeatures && item.iFeatures.length >= 1">
                                {{getFeatureNameById(item.iFeatures[0].id)}}
                            </span>
                            <strong class="card-title" style="font-size: 16px;color:black;margin: 0;font-weight: 1200;"> &nbsp;{{item.name}}</strong>
                            <br />
                            <small class="card-text text-black-50">{{item.type}}</small>
                            <br />
                            <small class="card-text text-black-50" style="color: #E54C2A;">{{item.priceRange}}</small>
                            <br />
                            <small class="card-text text-black-50 one-line" style="font-size:12px;">{{getFullAddress(item)}}</small>
                            <br />
                            <span *ngIf="item.iFeatures && item.iFeatures.length > 1">
                                <span *ngFor="let feature of item.iFeatures, index as i">
                                    <span class="badge badge-primary" *ngIf="i >= 1 && (i <=3)">{{getFeatureNameById(feature.id)}}</span>
                                </span>
                                <span class="badge badge-primary" *ngIf="item.iFeatures.length > 3">...</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </p-tabPanel>
        <p-tabPanel header="{{'Map View'|translate}}" leftIcon="fa fa-map">
            <app-mapview *ngIf="cTab === 1"></app-mapview>
        </p-tabPanel>

    </p-tabView>


</div>
<ngx-spinner
bdColor = "rgba(51, 51, 51, 0.8)"
size = "default"
color = "#fff"
type = "ball-spin"
></ngx-spinner>